<template>
  <el-row>
    <el-col class="code-left" :sm="24" :lg="24">
      <div class="title">
        <i class="el-icon-c-scale-to-original"></i>
        站点列表
        <el-button
          class="add-site"
          type="success"
          round
          icon="el-icon-plus"
          @click="addSite"
        ></el-button>
      </div>
      <div class="cur-tree site-list">
        <el-menu>
          <el-menu-item
            v-for="it in siteList"
            :key="it.key"
            :class="formData.id == it.id ? 'active' : ''"
            @click="siteSelect(it)"
          >
            <i class="el-icon-menu"></i>
            <span slot="title">{{ it.name }}</span>
            <i class="site-del el-icon-delete" @click.stop="deleteSite(it)"></i>
          </el-menu-item>
        </el-menu>
      </div>
    </el-col>
    <el-col
      class="code-right"
      :style="{ height: fullHeight + 'px' }"
      :sm="24"
      :lg="24"
    >
      <div class="title">
        <i class="el-icon-document-copy"></i>
        站点信息
        <span>【{{ formData.name }}】</span>
      </div>
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <div class="menu-wall">
          <el-tabs v-model="activeName">
            <el-tab-pane
              label="基本信息"
              name="first"
              :style="{ height: tabsHeight + 'px' }"
            >
              <el-form-item label="网站名称" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入网站名称"
                  :maxlength="50"
                  show-word-limit
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="网站网址" prop="siteUrl">
                <el-input
                  v-model="formData.siteUrl"
                  placeholder="请输入网站网址"
                  :maxlength="200"
                  show-word-limit
                  clearable
                  :style="{ width: '100%' }"
                >
                  <template slot="prepend">http</template>
                </el-input>
              </el-form-item>
              <el-form-item label="网站Logo" prop="logo">
                <el-input
                  v-model="formData.logo"
                  placeholder="请输入网站Logo"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <template slot="append">选择图片</template>
                </el-input>
              </el-form-item>
              <el-form-item label="Seo标题" prop="seoTitle">
                <el-input
                  v-model="formData.seoTitle"
                  placeholder="请输入Seo标题"
                  :maxlength="100"
                  show-word-limit
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="Seo关键字" prop="seoKey">
                <el-input
                  v-model="formData.seoKey"
                  type="textarea"
                  placeholder="请输入Seo关键字"
                  :maxlength="200"
                  show-word-limit
                  :autosize="{ minRows: 3, maxRows: 3 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="Seo描述" prop="seoDescribe">
                <el-input
                  v-model="formData.seoDescribe"
                  type="textarea"
                  placeholder="请输入Seo描述"
                  :maxlength="500"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="版权信息" prop="copyright">
                <el-input
                  v-model="formData.copyright"
                  type="textarea"
                  placeholder="请输入版权信息，支持HTML"
                  :maxlength="1000"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="是否关闭" prop="status" required>
                <el-switch v-model="formData.status"></el-switch>
              </el-form-item>
              <el-form-item label="关闭原因" prop="closeInfo">
                <el-input
                  v-model="formData.closeInfo"
                  type="textarea"
                  placeholder="请输入网站关闭原因"
                  :maxlength="1000"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="公司信息" name="second">
              <el-form-item label="公司电话" prop="companyTel">
                <el-input
                  v-model="formData.companyTel"
                  placeholder="请输入公司电话"
                  :maxlength="30"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司传真" prop="companyFax">
                <el-input
                  v-model="formData.companyFax"
                  placeholder="请输入公司传真"
                  :maxlength="30"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司邮箱" prop="companyEmail">
                <el-input
                  v-model="formData.companyEmail"
                  placeholder="请输入公司邮箱"
                  :maxlength="30"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司地址" prop="companyAddress">
                <el-input
                  v-model="formData.companyAddress"
                  placeholder="请输入公司地址"
                  :maxlength="100"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司客服" prop="customerService">
                <el-input
                  v-model="formData.customerService"
                  placeholder="请输入公司客服，支持多个逗号分隔“,”"
                  :maxlength="100"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="二维码" name="third">
              <el-row v-for="(it, index) in formData.codesJson" :key="it.index">
                <el-col :span="8">
                  <el-form-item label="二维码标识">
                    <el-input
                      v-model="it.name"
                      placeholder="如：微信二维码"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="二维码地址">
                    <el-input
                      v-model="it.value"
                      placeholder="请选择地址二维码"
                      :maxlength="100"
                      clearable
                      :style="{ width: '100%' }"
                    >
                      <template slot="append">
                        <el-button type="primary">选择图片</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button
                          v-if="index == 0"
                          type="primary"
                          @click="appendCode"
                        >
                          <i class="el-icon-circle-plus-outline"></i>
                        </el-button>
                        <el-button
                          v-if="index != 0"
                          type="primary"
                          @click="removeCode(it)"
                        >
                          <i class="el-icon-delete"></i>
                        </el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="footer-btn">
          <el-button
            type="primary"
            :disabled="btnDisable"
            round
            @click="submitForm"
          >
            保存站点信息
          </el-button>
          <el-button round @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
  import { getList, add, update, deletes } from '@/api/cms/site'
  import { deepClone } from '@/utils/index'
  export default {
    data() {
      return {
        loading: true,
        activeName: 'first',
        btnDisable: true,
        fullHeight: window.innerHeight - 130,
        tabsHeight: window.innerHeight - 290,
        siteList: [],
        formData: {
          id: undefined,
          name: undefined,
          siteUrl: undefined,
          logo: undefined,
          seoTitle: undefined,
          seoKey: undefined,
          seoDescribe: undefined,
          copyright: undefined,
          status: true,
          closeInfo: undefined,
          companyTel: undefined,
          companyFax: undefined,
          companyEmail: undefined,
          companyAddress: undefined,
          customerService: undefined,
          Codes: undefined,
          codesJson: [{ name: '二维码', value: '' }],
        },
        rules: {
          name: [
            {
              required: true,
              message: '请输入网站名称',
              trigger: 'blur',
            },
          ],
          siteUrl: [
            {
              required: true,
              message: '请输入网站网址',
              trigger: 'blur',
            },
          ],
          logo: [
            {
              required: true,
              message: '请输入网站Logo',
              trigger: 'blur',
            },
          ],
          seoTitle: [
            {
              required: true,
              message: '请输入Seo标题',
              trigger: 'blur',
            },
          ],
          seoKey: [
            {
              required: true,
              message: '请输入Seo关键字',
              trigger: 'blur',
            },
          ],
          seoDescribe: [
            {
              required: true,
              message: '请输入Seo描述',
              trigger: 'blur',
            },
          ],
          copyright: [],
          closeInfo: [],
          companyTel: [],
          companyFax: [],
          companyEmail: [],
          companyAddress: [],
          customerService: [],
        },
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      async init() {
        const t = await getList(this.param)
        this.siteList = t.data
        this.loading = false
        if (this.siteList.length > 0) {
          this.formData = deepClone(this.siteList[0])
          this.btnDisable = false
        }
      },
      submitForm() {
        this.$refs['elForm'].validate(async (valid) => {
          if (!valid) return
          let tipName = '添加成功'
          let res = null
          if (!this.formData.id) {
            res = await add(this.formData)
          } else {
            tipName = '修改成功'
            res = await update(this.formData)
          }
          if (res.code == 200) {
            this.$notify({
              message: tipName,
              type: 'success',
            })
            this.init()
          } else {
            this.$notify({
              message: message,
              type: 'error',
            })
          }
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
      siteSelect(item) {
        this.formData = deepClone(item)
        this.btnDisable = false
      },
      addSite() {
        this.formData.id = undefined
        this.btnDisable = false
        this.$refs['elForm'].resetFields()
        this.formData.codesJson = [{ name: '二维码', value: '' }]
      },
      deleteSite(item) {
        this.$confirm('确认要删除当前站点吗？', '提示', {
          type: 'warning',
        }).then(async () => {
          this.loading = true
          const res = await deletes(item.id)
          this.loading = false
          if (res.code == 200) {
            this.$notify({
              message: '删除成功',
              type: 'success',
            })
            this.init()
            this.$refs['elForm'].resetFields()
          } else {
            this.$notify({
              message: res.message,
              type: 'error',
            })
          }
        })
      },
      appendCode() {
        this.formData.codesJson.push({
          name: '',
          value: '',
        })
      },
      removeCode(item) {
        var index = this.formData.codesJson.indexOf(item)
        if (index !== -1) {
          this.formData.codesJson.splice(index, 1)
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  @media only screen and (max-width: 768px) {
    .code-left {
      width: 100% !important;
      position: relative !important;
    }
    .code-right {
      width: 100% !important;
      left: 0px !important;
      padding: 0px !important;
      margin-top: 20px;
    }
  }
  .code-left {
    float: inherit;
    background-color: #edf5ff;
    width: 260px;
    position: absolute;
    top: 0;
    bottom: 0;
    .title {
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      font-weight: bold;
      background-color: #dee5ef;
    }
  }
  .code-left::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    left: -19px;
    top: 0px;
    background-color: #f6f8f9;
  }
  .code-right {
    left: 260px;
    width: calc(100% - 270px);
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    float: inherit;
    padding: 0px 0px 10px 10px;
    .title {
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      font-weight: bold;
      background-color: #dee5ef;
    }
  }
  .menu-wall {
    padding: 10px;
  }
  .footer-btn {
    height: 45px;
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 10;
    bottom: 0px;
    border-top: 1px solid #e6e7e8;
    padding-top: 10px;
    background: #ffffff;
  }
</style>
<style>
  .site-list .el-menu {
    border-right: none;
    background: transparent !important;
  }
  .site-list .el-menu-item,
  .site-list .el-menu-item.is-active {
    background: transparent !important;
  }
  .site-list .el-menu-item.active {
    background: #ffffff !important;
  }
  .menu-wall .el-tab-pane {
    overflow: auto;
    padding-right: 30px;
  }
  .add-site {
    padding: 8px !important;
    float: right;
    margin: 8px;
  }
  .site-del {
    position: absolute;
    right: 15px;
    top: 20px;
    color: #f36d6f !important;
    font-size: 18px;
  }
</style>
